<template>
    <div class="layout">
        <el-row>
            <el-col :span="19">
                <div class="yiyuan">
                    <p class="top">
                        医院
                    </p>

                    <div class="level">
                        <h2>等级</h2>
                        <ul>
                            <li v-for="(item, index) in arr1" :key="index">
                                {{ item.nationName }}
                            </li>

                        </ul>
                    </div>


                    <div class="level">
                        <h2> 地区</h2>
                        <ul>
                            <li v-for="(item, index) in arr1" :key="index">
                                {{ item.nationName }}
                            </li>

                        </ul>
                    </div>
                    <Card v-for="(hosItem, index)  in arr1" :key="index" :hos="hosItem" />
                </div>
            </el-col>
            <el-col :span="5">
                <right />
            </el-col>
        </el-row>
    </div>
</template>
<script setup name="Level">
import Card from '@/view/card/index.vue';

import { onMounted, ref } from 'vue';

import { requstHosptital } from '@/api/Home.ts';
import right from './right.vue';

let pageNo = ref(1);
let pageSize = ref(10);

let arr1 = ref([])

// let resutlt = await requstHosptital(pageNo.value, pageSize.value);
// console.log('hahha', resutlt);
// arr1 = resutlt.data.content;

// console.log('hahha1', arr1);




requstHosptital(pageNo.value, pageSize.value).then(res => {
    console.log('hahha', res.data.list);

    arr1.value = res.data.list
})


</script>


<style scoped lang="scss">
.layout {
    height: 800px;
    margin-left: 100px;
    width: 90%;
    justify-content: space-between;
    align-items: center;
}

.top {
    font-size: 24px;
    font-weight: bold;
    margin: 10px 10px;
}

.level {
    display: flex;
    margin: 10px 10px;

    h2 {
        width: 160px;
    }

    ul {
        display: flex;
        flex-wrap: wrap;

        li {
            display: flex;

            margin: 10px 10px;
        }

        li:hover {
            background-color: #f0f0f0;
            cursor: pointer;
        }

    }
}
</style>